<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="dota2_main.css">
  <link rel="stylesheet" href="reset.css">
  <title>dota2_main</title>
</head>

<body>
  <div id="header">
    <nav id="dota2_nav_container">
      <a id="a1" href="#">《dota2中国官网》</a>
      <nav id="nav_a">
        <div class="link_div">
          <a href="#">
            <span>首页</span>
            <span class="link_div_e">HOME</span>
          </a>
        </div>
        <div class="link_div">
          <a href="#">
            <span>咨询</span>
            <span class="link_div_e">NEWS</span>
          </a>
        </div>
        <div class="link_div">
          <a href="#">
            <span>赛事</span>
            <span class="link_div_e">MATCH</span>
          </a>
        </div>
        <div class="link_div">
          <a href="#">
            <span>互动</span>
            <span class="link_div_e">INTERACTION</span>
          </a>
        </div>
        <div class="link_div">
          <a href="#">
            <span>资料</span>
            <span class="link_div_e">DATA</span>
          </a>
        </div>
        <div class="link_div">
          <a href="#">
            <span>服务</span>
            <span class="link_div_e">SERVICE</span>
          </a>
        </div>
        <div class="link_div">
          <a href="#">
            <span>下载</span>
            <span class="link_div_e">DOWN</span>
          </a>
        </div>
      </nav>
      <nav id="dota2_user">
        <div class="nav-avatar"></div>
        <div id="users">
          <span id="login">您好，请
            <a href="#">登录</a>
          </span>
          <span id="login_next">登录后可进入您的个人中心</span>
        </div>
      </nav>
    </nav>
  </div>
  <div id="dota2_image">

  </div>
  </div>
  <div id="main">
    <div id="dota2_nav_select">
      <div id="left_select">
        <a id="left_button_recharge" href="#"></a>
        <a id="left_button_download" href="#"></a>
        <a id="left_button_signup" href="#"></a>
      </div>
      <div id="right_select">
        <a id="right_button_source" href="#"></a>
        <a id="right_button_steps" href="#"></a>
        <a id="right_button_min" href="#"></a>
      </div>
    </div>
    <div class="test">

    </div>
    <div id="dota2_message">
      <div id="left_message">
        <div id="m_title">
          <div id="m_title_left">
            <span>新闻中心</span>
            <div id="m_title_left_image">

            </div>
          </div>
          <div id="m_title_right">
            <a href="#">更多</a>
            <div id="m_title_right_image">

            </div>
          </div>
        </div>
        <div id="m_context">
          <ul class="u_tabs">
            <li class="u_tab">综合新闻</li>
            <li class="u_tab">官方新闻</li>
            <li class="u_tab">赛事新闻</li>
            <li class="u_tab">更新日志</li>
            <li class="u_tab">媒体资讯</li>
          </ul>
          <ul class="u_panels">
            <li class="u_panel">
              <div class="u_lists">
                <a class="u_recommend" href="#">
                  <h3>十六豪强齐聚申城，第三届亚洲邀请赛剑指东方</h3>
                  <div class="u_contents">
                    <div class="u_item_avatar">
                      <img src="sword.jpg" alt="十六豪强齐聚申城，第三届亚洲邀请赛剑指东方">
                    </div>
                    <div class="u_msg">
                      <p href="#">
                        DOTA2已让所有DOTAer形成了独特的生活习惯。每年八月，DOTA2的粉丝们都会呼朋引伴，备好宵夜，将生物钟调整到西雅图时间，为万里之外的比赛欢呼呐喊。 而在春季，所有玩家都会将目光投向东方，聚焦在中国上海。亚洲邀请赛，世界强队论剑黄浦江畔。
                      </p>
                      <span class="u_date">2017-12-29</span>
                    </div>
                  </div>
                </a>
                <a class="list" href="#">
                  <div class="u_dot"></div>
                  <p>​DOTA2神秘商店开启双旦活动 神秘珍藏+惊喜满减邀你体验</p>
                  <span class="u_date">2017-12-29</span>
                </a>
                <a class="list" href="#">
                  <div class="u_dot"></div>
                  <p>​DOTA2神秘商店开启双旦活动 神秘珍藏+惊喜满减邀你体验</p>
                  <span class="u_date">2017-12-29</span>
                </a>
                <a class="list" href="#">
                  <div class="u_dot">

                  </div>
                  <p>​DOTA2神秘商店开启双旦活动 神秘珍藏+惊喜满减邀你体验</p>
                  <span class="u_date">2017-12-29</span>
                </a>
                <a class="list" href="#">
                  <div class="u_dot">

                  </div>
                  <p>​DOTA2神秘商店开启双旦活动 神秘珍藏+惊喜满减邀你体验</p>
                  <span class="u_date">2017-12-29</span>
                </a>
                <a class="list" href="#">
                  <div class="u_dot">
                  </div>
                  <p>​DOTA2神秘商店开启双旦活动 神秘珍藏+惊喜满减邀你体验</p>
                  <span class="u_date">2017-12-29</span>
                </a>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div id="right_message">
        <div id="top_right_message">
          <div class="u_hotvideo">
            <div class="u_title">
              <div class="u_left">
                <i class="u_icon u_icon_hotvideo"></i>
                <span>近期热点</span>
              </div>
            </div>
            <div class="u_content">
              <div class="u_video">
                <a class="video_img" href="#">
                  <img src="171031main.jpg" alt="石麟剑士">
                </a>
              </div>
            </div>
          </div>
        </div>
        <div id="buttom_right_message">
          <div class="u_ratecenter">
            <div class="u_title">
              <div class="u_left">
                <i class="u_icon u_icon_racecenter"></i>
                <span>赛事中心</span>
              </div>
              <div class="u_right">
                <a href="#">更多</a>
                <i class="u_icon u_icon_more"></i>
              </div>
            </div>
            <div class="u_content">
              <img src="171031main.jpg" alt="石麟剑士">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="dota2_play">
      <div id="left_play">
        <div class="u_title">
          <div class="u_left">
            <i class="u_icon u_icon_activity"></i>
            <span>活动中心</span>
          </div>
          <div class="u_activity_list">
            <div class="u_activity_type">
              <div class="u_border">官方活动</div>
            </div>
            <div class="u_activity_type">
              <div class="u_border">赛事活动</div>
              <i class="u_icon u_icon_ellipsehot_act"></i>
            </div>
            <div class="u_activity_type">
              <div class="u_border">推广活动</div>
            </div>
            <div class="u_activity_type">
              <div>商城特选</div>
            </div>
          </div>
        </div>
        <div class="u_content">
          <div class="u_activity_types">
            <div class="type_1"></div>
            <span>DOTA2神秘商店开启双旦活动</span>
          </div>
          <div class="u_activity_types">
            <div class="type_2"></div>
            <span>DOTA2神秘商店开启双旦活动</span>
          </div>
          <div class="u_activity_types">
            <div class="type_3"></div>
            <span>DOTA2神秘商店开启双旦活动</span>
          </div>
          <div class="u_activity_types">
            <div class="type_4"></div>
            <span>DOTA2神秘商店开启双旦活动</span>
          </div>
        </div>
      </div>
      <div id="right_play">
        <div class="u_version">
          <div class="u_title">
            <div class="u_left">
              <i class="u_icon u_icon_version"></i>
              <span>版本更新</span>
            </div>
            <div class="u_right">
              <a href="#">更多</a>
              <i class="u_icon u_icon_more"></i>
            </div>
          </div>
          <div class="u_content">
            <img src="version.jpg" alt="版本更新">
          </div>
        </div>
        <div class="u_map">
          <div class="u_title">
            <div class="u_left">
              <i class="u_icon u_icon_map"></i>
              <span>自定义地图</span>
            </div>
            <div class="u_right">
              <a href="#">更多</a>
              <i class="u_icon u_icon_more"></i>
            </div>
          </div>
          <div class="blank">

          </div>
          <div class="u_content">
            <ul>
              <li>
                <a href="#">
                  <span class="u_map_logo">
                    <img src="map_1.jpg" alt="2VS2 MID VALENCE">
                  </span>
                  <span class="u_map_title">2VS2 MID VALENCE</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="u_map_logo">
                    <img src="map_2.jpg" alt="ONE PATH TO VICTORY">
                  </span>
                  <span class="u_map_title">ONE PATH TO VICTORY</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div id="dota2_video">
      <div id="left_video">
        <div class="u_title">
          <div class="u_left">
            <i class="u_icon u_icon_vedio"></i>
            <span>视频中心</span>
          </div>
          <div class="u_right">
            <span>更多</span>
            <i class="u_icon u_icon_more"></i>
          </div>
        </div>
        <div class="blank">

        </div>
        <div class="u_content">
          <ul class="u_tabs">
            <li class="u_tab">最新视频</li>
            <li class="u_tab">官方视频</li>
            <li class="u_tab">比赛视频</li>
            <li class="u_tab">战队视频</li>
          </ul>
          <ul class="u_panels">
            <li class="u_panel">
              <a class="u_item" href="#">
                <span class="u_item_logo">
                  <img src="video.png" alt="SL i-联赛第二日 精彩集锦：Newbee连续让一追二">
                </span>
                <p class="u_item_title">SL i-联赛第二日 精彩集锦：Newbee连续让一追二</p>
                <span class="u_item_time">视频</span>
              </a>
            </li>
            <li class="u_panel">
              <a class="u_item" href="#">
                <span class="u_item_logo">
                  <img src="video.png" alt="SL i-联赛第二日 精彩集锦：Newbee连续让一追二">
                </span>
                <p class="u_item_title">SL i-联赛第二日 精彩集锦：Newbee连续让一追二</p>
                <span class="u_item_time">视频</span>
              </a>
            </li>
            <li class="u_panel">
              <a class="u_item" href="#">
                <span class="u_item_logo">
                  <img src="video.png" alt="SL i-联赛第二日 精彩集锦：Newbee连续让一追二">
                </span>
                <p class="u_item_title">SL i-联赛第二日 精彩集锦：Newbee连续让一追二</p>
                <span class="u_item_time">视频</span>
              </a>
            </li>
            <li class="u_panel">
              <a class="u_item" href="#">
                <span class="u_item_logo">
                  <img src="video.png" alt="SL i-联赛第二日 精彩集锦：Newbee连续让一追二">
                </span>
                <p class="u_item_title">SL i-联赛第二日 精彩集锦：Newbee连续让一追二</p>
                <span class="u_item_time">视频</span>
              </a>
            </li>
            <li class="u_panel">
              <a class="u_item" href="#">
                <span class="u_item_logo">
                  <img src="video.png" alt="SL i-联赛第二日 精彩集锦：Newbee连续让一追二">
                </span>
                <p class="u_item_title">SL i-联赛第二日 精彩集锦：Newbee连续让一追二</p>
                <span class="u_item_time">视频</span>
              </a>
            </li>
            <li class="u_panel">
              <a class="u_item" href="#">
                <span class="u_item_logo">
                  <img src="video.png" alt="SL i-联赛第二日 精彩集锦：Newbee连续让一追二">
                </span>
                <p class="u_item_title">SL i-联赛第二日 精彩集锦：Newbee连续让一追二</p>
                <span class="u_item_time">视频</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div id="right_video">
        <div class="u_title">
          <div class="u_left">
            <i class="u_icon u_icon_call"></i>
            <span>客服中心</span>
          </div>
          <div class="u_right">
            <span>更多</span>
            <i class="u_icon u_icon_more"></i>
          </div>
        </div>
        <div class="blank">

        </div>
        <div class="u_content">
          <div class="u_search">
            <div class="u_inputgrounp">
              <input type="text" name="" value="" placeholder="请输入你的问题">
              <input class="u_btn_submit" type="submit" name="" value="">
              <i class="u_icon u_icon_search"></i>
            </div>
            <a class="u_btn_add" href="#">我要提问</a>
          </div>
          <div class="blank">

          </div>
          <div class="u_question">
            <h3>常见问题</h3>
            <div class="u_lists">
              <a class="u_list u_red" href="#">
                <i class="u_icon u_icon_dot"></i>
                <span>如何找回与DOTA2账户绑定的完美通行证？</span>
              </a>
              <a class="u_list" href="#">
                <i class="u_icon u_icon_dot"></i>
                <span>如何找回与DOTA2账户绑定的完美通行证？</span>
              </a>
              <a class="u_list" href="#">
                <i class="u_icon u_icon_dot"></i>
                <span>如何找回与DOTA2账户绑定的完美通行证？</span>
              </a>
              <a class="u_list" href="#">
                <i class="u_icon u_icon_dot"></i>
                <span>如何找回与DOTA2账户绑定的完美通行证？</span>
              </a>
              <a class="u_list" href="#">
                <i class="u_icon u_icon_dot"></i>
                <span>如何找回与DOTA2账户绑定的完美通行证？</span>
              </a>
              <a class="u_list" href="#">
                <i class="u_icon u_icon_dot"></i>
                <span>如何找回与DOTA2账户绑定的完美通行证？</span>
              </a>
              <a class="u_list" href="#">
                <i class="u_icon u_icon_dot"></i>
                <span>如何找回与DOTA2账户绑定的完美通行证？</span>
              </a>
              <a class="u_list" href="#">
                <i class="u_icon u_icon_dot"></i>
                <span>如何找回与DOTA2账户绑定的完美通行证？</span>
              </a>
              <a class="u_list" href="#">
                <i class="u_icon u_icon_dot"></i>
                <span>如何找回与DOTA2账户绑定的完美通行证？</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="footer">
    <div class="rel1100">
      <div class="foot_dl">
        <dt>
          <a href="#">
            <img src="logo-wanmei.png" alt="">
          </a>
          <a href="#">
            <img src="logo-valve.png" alt="">
          </a>
        </dt>
        <dd>
          完美世界（北京）网络技术有限公司 版权所有 Copyright © 2012-2018 Beijing Perfect World Network Technology Co., Ltd. All Rights reserved
          <br> ©2012 Valve Corporation. All Rights reserved. Licensed to Beijing Perfect World Network Technology Co., Ltd. in
          China
        </dd>
      </div>
      <p>
        京ICP证：050016号《网络文化经营许可证》编号：京网文[2011]0782-287号 《网络视听许可证》编号：0110587
        <br> 京公网安备11010502033859号 文网进字[2013] 028号 新出审字[2013] 1505号 ISBN：978-7-89989-826-0
      </p>
    </div>
  </div>
  
</body>

</html>